<script setup lang="ts">
import useAppState from "~/hooks/useAppState";
import { categoryList, productList } from "~/mock/products";

defineProps<{
  navList: {
    name: string;
    href?: string;
    menus?: { name: string; href?: string; target?: string }[];
  }[];
}>();

const dropValue = ref<number>();
const categroyValue = ref<number | undefined>(categoryList[0]["value"]);
const showDialog = ref(false);

const products = computed(() => {
  const { value } = categroyValue;
  return productList.filter((e) => value === e.category);
});

const route = useRoute();
watch(
  () => route.path,
  (e) => reset()
);

// 重置到初始状态
function reset() {
  showDialog.value = false;
  dropValue.value = undefined;
  categroyValue.value = undefined;
}

const appState = useAppState();
</script>

<template>
  <header class="page-header h-54px">
    <div class="flex items-center justify-between">
      <div class="w-54px h-54px flex-center" @click="showDialog = true">
        <Icon name="Menu" class="text-white text-xl" />
      </div>

      <a class="logo-wrap flex-none" href="/">
        <img src="@/assets/images/logo.png" class="w-full" />
      </a>

      <div class="w-54px h-54px flex-center">
        <!-- <Icon name="Search" class="text-white text-xl" /> -->
      </div>
    </div>
  </header>

  <div class="h-54px" v-show="appState.fillAppHeader">
    <!-- FillHeader -->
  </div>

  <div
    v-if="showDialog"
    class="flex flex-col fixed top-0 left-0 w-full h-full bg-white z-50"
  >
    <div class="flex-none flex h-54px border-b-#eee">
      <div class="flex-center w-54px" @click="showDialog = false">
        <Icon name="Close" class="text-xl" />
      </div>
    </div>

    <div class="flex-auto overflow-y-auto">
      <DrapItem
        v-for="(item, index) in navList"
        :key="index"
        :title="item.name"
        :value="index"
        :link="item.link"
        v-model="dropValue"
        @click="dropValue = index"
      >
        <template v-if="index === 0">
          <DrapItem
            v-for="categoryItem in categoryList"
            :key="categoryItem.value"
            :title="categoryItem.title"
            :value="categoryItem.value"
            v-model="categroyValue"
          >
            <div class="px-4">
              <ProductItem
                v-for="(value, vIndex) in products"
                :key="vIndex"
                :source="value"
                class="mb-4"
                :ellipsis="false"
              />
            </div>
          </DrapItem>
        </template>

        <template v-else>
          <DrapItem
            v-for="(menu, sIndex) in item.menus"
            :key="sIndex"
            :title="menu.name"
            :value="sIndex"
            :href="menu.href"
          />
        </template>
      </DrapItem>
    </div>
  </div>
</template>
